<template>
    <div>
        <el-row class="distribution_row">
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    
                        <div id="classChart" :style="{width: '500px', height: '400px'}"></div>
                    
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light">
                    <el-row class="distribution_row">
                        <el-card shadow="hover" style="width: 100%; height:50%">
                            <div style="width: 100%; display: inline-block; ">
                                <el-statistic :value="deadline2" time-indices title="初审为作品分配专家" v-if="DistributionValid===true && havedistribute===false">
                                    <template slot="suffix">
                                        后将关闭该功能，请尽快为初审作品分配专家
                                    </template>
                                </el-statistic>
                                <el-statistic  title="初审分配时间已过"  v-if="afterEndTime===true">
                                </el-statistic>
                                <el-statistic title="初审已分配" v-if="havedistribute===true">
                                </el-statistic>
                                <el-statistic :value="deadline1" time-indices title="作品提交截至时间" v-if="beforStartTime">
                                    <template slot="suffix">
                                        后作品停止提交，分配专家时间段还未到
                                    </template>
                                </el-statistic>
                            </div>
                        </el-card>
                    </el-row>
                    <el-row class="distribution_row">
                        <el-card shadow="hover" style="width: 100%;">
                            <div style="width: 100%; display: inline-block; ">
                                <el-statistic :value="haveupload_count" title="已提交作品人数">
                                </el-statistic>
                            </div>
                        </el-card>
                    </el-row>
                   <el-row class="distribution_row">
                    <el-card shadow="hover" style="width: 100%;">
                        <div style="width: 100%; display: inline-block; ">
                            <el-statistic :value="notupload_count" title="已报名人数">
                            </el-statistic>
                        </div>
                    </el-card>
                   </el-row>
                    
                </div>
            </el-col>
        </el-row>
    
        <el-tooltip placement="top">
            <div slot="content" style="font-size: 18px;">
                <p>为每个作品随机分配两个评审专家进行初审，</p>
                <p v-if="!havedistribute">还未分配</p>
                <p v-if ="havedistribute">已经分配过了</p>
                分配时间在: <span style="color: #409EFF;font-size:20px;font-weight:500;font-family:PingFang SC;">{{startFirstScoringTime}}~{{endFirstScoringTime}}</span></div>
            <el-button type="primary" :disabled="buttonValid" @click="distributionFirst" style="width: 50%;">初审分配专家</el-button>
        </el-tooltip>
        
    </div>
</template>

<script lang="js">

    export default {
        
        data() {
            return {
                 haveupload_count:NaN,
                 notupload_count: NaN,
                startFirstScoringTime: "2024-5-6 23:30:00",
                endFirstScoringTime: "2024-5-30 23:55:00",
                DistributionValid:false,
                afterEndTime:false,
                havedistribute:false,
                buttonValid:false,
                beforeStartTime:false,
                classcount:[],
                deadline2: new Date("2024-5-30 23:55:00"),
                deadline1: new Date("2024-5-6 23:30:00")
            };
        },
        methods: {
            async fetchData(){
                await this.$axios({
                    method:'post',
                    url: "http://localhost:8080/firstscoring/isEmpty",
                    
                }).then(res=>{
                    
                    if(res.data.data === 0){
                        
                        this.havedistribute = false;
                    }else{
                        console.log(res.data.data);
                        this.havedistribute = true;
                    }
                })
            },
            async draw() {
                    let myChart = this.$echarts.init(document.getElementById('classChart'))
                    // 绘制图表
                    myChart.setOption({
                        title: {
                            text: '初审作品类别统计',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '类别',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: 30,
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [],
                            }
                        ]
                    })
                    
                   await this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/contestants/uploadedcon_groupbyclass",
                }).then(res => {
                    if (res.data.code == 1) {
                        this.classcount = res.data.data;
                        console.log(this.classcount);
                        const totalValue = this.classcount.reduce((accumulator, currentValue) => {
                            return accumulator + currentValue.value;
                        }, 0);
                        this.haveupload_count = totalValue;
                        myChart.setOption({
                            series: [
                                {
                                    name: '类别',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    itemStyle: {
                                        borderRadius: 10,
                                        borderColor: '#fff',
                                        borderWidth: 2
                                    },
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: 30,
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data:this.classcount,
                                }
                            ]
                        })

                    }

                })
                
                    //防止越界，重绘canvas，解决掉屏幕缩小，图表不会随之适应的缩小的方法
                    window.onresize = myChart.resize;
                    
                },
            async totalcon(){
                await this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/contestants/totalnum",
                }).then(res => {
                    if (res.data.data != 0) {
                        this.notupload_count = res.data.data
                    }

                })
            },
            getTime() {
                var nowTime = Date.parse(new Date());
                return nowTime;
            },
            ValidDateStage() {
                var newDate = this.getTime();

                var startTime = Date.parse(new Date(this.startFirstScoringTime));
                var endTime = Date.parse(new Date(this.endFirstScoringTime));
                if (newDate > startTime && newDate < endTime) {
                    this.DistributionValid = true 
                } else if(newDate<startTime) {
                    this.beforeStartTime = true 
                }else{
                    this.afterEndTime = true
                }
                
            },
            buttonisvalid(){
                console.log(this.DistributionValid);
                console.log(this.havedistribute);

                if(this.DistributionValid === true && this.havedistribute === false){
                    this.buttonValid = false;
                }else{
                    this.buttonValid = true;
                }
                console.log(this.buttonValid);
            },
            distributionFirst(){
                this.$axios({
                    method:'post',
                    url:"http://localhost:8080/firstscoring/distributionfirst"
                }).then(res=>{
                    if(res.data.code==1){
                        this.$message.success("分配成功");
                        window.location.reload();
                        this.fetchData();
                        this.ValidDateStage();
                        this.buttonisvalid();
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
                
            }
            
            
        },
       async mounted() {
            try{
                await this.fetchData();
                await this.totalcon();
                this.ValidDateStage();
                this.buttonisvalid();
                await this.draw();
            }catch(error){
                console.log('Error During mount:',error)
            }
            
        },
    }
</script>
<style >
    .distribution_row{
            display: flex;
        align-items: stretch;
        margin-top: 5%;
    }
    .el-statistic .con {
        margin-top: 10px !important; 
        color: #f33f3f !important;    
    }
    .el-statistic .con .number{
        font-size: 22px !important;
        
    }
    .el-statistic .con .suffix{
        font-size: 20px !important;
        
    }
    .el-statistic .head .title {
        margin-bottom: 8px !important;
        color: #606266 !important;
        font-size: 16px !important;
    }
    
</style>